<template>
  <div class="cart" :style="getCardWidth">
    <div class="label">{{cardData.label}}</div>
    <div class="cartContent">
      <div v-for="(card,index) in cardData.data" class="link" :style="{width: textWidth-15+'px'}">
        <a @click="clickUrl(card.url,index)" :style="showBackground&&index===selectIndex?getSelectedBackground:''">{{card.label}}</a>
      </div>
    </div>
  </div>
</template>

<script>

  export default {
    name: "card",
    model: {},
    props: {
      cardData: {
        type: Object,
      },
      oneLineDisplayWidth: {
        type: String,
        default: 85 * 2 + 'px'
      },
      textWidth: {
        type: Number,
        default: 85
      },
      showBackground: {
        type: Boolean,
        default: false
      },
    },
    data() {
      return {
        selectIndex: -1
      }
    },
    computed: {
      getCardWidth: function () {
        return {width: this.oneLineDisplayWidth}
      },
      getSelectedBackground: function () {
        return {backgroundColor: 'red', color: 'white'}
      }
    },
    beforeCreate: function () {

    },
    created: function () {

    },
    beforeMount: function () {

    },
    mounted: function () {

    },
    updated: function () {

    },
    activated: function () {

    },
    deactivated: function () {

    },
    beforeDestroy: function () {

    },
    destroyed: function () {

    },
    methods: {
      clickUrl(url, index) {
        this.selectIndex = index
        this.$emit('clickUrl', url)
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../../../style/color";

  .cart {
    line-height: 24px;
    width: 170px;
    /*border: 1px dashed #e3e4e5;*/

    /*border:  1px solid #ccc;*/

    .label {
      color: $light-font-color;
      font-size: 14px;
      font-weight: 700;
      padding-left: 15px;
      padding-top: 10px;
    }

    .cartContent {
      display: flex;
      flex-wrap: wrap;
      font-size: 12px;
      padding-bottom: 10px;
      width: 100%;

      .link {
        /*用store*/
        /*width: 70px;*/
        padding-left: 15px;
        line-height: 24px;

        a {
          text-decoration: none;
          color: $dark-font-color;

          &:hover {
            color: red;
            cursor: pointer;
          }
        }
      }
    }
  }
</style>
